<script setup lang="ts">
import {chatRemoveApi} from "@/api/chat_api";
import {Message} from "@arco-design/web-vue";
import {IconClose, IconRefresh} from "@arco-design/web-vue/es/icon";
import F_chat_record from "@/components/common/f_chat_record.vue";
import {ref} from "vue";

interface Props {
  visible: boolean
  detail: sessionDetailType
}

const props = defineProps<Props>()
const emits = defineEmits(["update:visible"])
const checkChatIDList = ref<number[]>([])

interface sessionDetailType {
  title: string
  id: number
}

const fChatRecordRef = ref()

async function removeChat() {
  const res = await chatRemoveApi(checkChatIDList.value)
  if (res.code) {
    Message.error(res.msg)
    return
  }
  Message.success(res.msg)
  fChatRecordRef.value.getChatList({sessionID: props.detail.id})
}

function cancel() {
  checkChatIDList.value = []
}

function allCheck() {
  const idList = fChatRecordRef.value.getChatIDList()
  checkChatIDList.value = idList
}

function drawerCancel() {
  emits("update:visible", false)
}

async function refresh() {
  await fChatRecordRef.value.getChatList({sessionID: props.detail.id, page: 1})
  Message.success("刷新成功")
}

</script>

<template>
  <a-drawer
      @cancel="drawerCancel"
      :footer="false"
      class="chat_drawer"
      width="40%"
      :visible="props.visible" :title="`${props.detail.title} 会话详情`">
    <div class="chat_body">
      <f_chat_record ref="fChatRecordRef" is-check v-model:check-id-list="checkChatIDList"
                     :session-id="props.detail.id"></f_chat_record>
      <div v-if="checkChatIDList.length" class="chat_menu">
        <a-button @click="cancel">取消</a-button>
        <a-button style="margin-left: 10px" type="primary" status="success" @click="allCheck">全选</a-button>
        <a-button @click="removeChat" style="margin-left: 10px" type="primary" status="danger">删除</a-button>
      </div>
    </div>
    <template #header>
      <div class="title">
        {{ props.detail.title }} 会话详情
      </div>
      <IconRefresh class="refresh" @click="refresh"></IconRefresh>
      <IconClose class="close" @click="drawerCancel"></IconClose>
    </template>
  </a-drawer>
</template>

<style lang="less">
.chat_drawer {
  .arco-drawer-header {
    display: flex;
    justify-content: space-between;
    position: relative;

    .close {
      cursor: pointer;
    }

    .refresh {
      position: absolute;
      right: 50px;
      cursor: pointer;
    }
  }

  .arco-drawer-body {
    padding: 0;

    .chat_body {
      .chat_menu {
        border: @f_border;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
</style>